<!DOCTYPE html>
<html lang="en">
<!--**
 *
 *----------Created by 黄伟峰 on 2018/11/6.----------
 * 　　　┏┓　　　┏┓
 * 　　┏┛┻━━━┛┻┓
 * 　　┃　　　　　　　┃
 * 　　┃　　　━　　　┃
 * 　　┃　┳┛　┗┳　┃
 * 　　┃　　　　　　　┃
 * 　　┃　　　┻　　　┃
 * 　　┃　　　　　　　┃
 * 　　┗━┓　　　┏━┛
 * 　　　　┃　　　┃神兽保佑
 * 　　　　┃　　　┃代码无BUG！
 * 　　　　┃　　　┗━━━┓
 * 　　　　┃　　　　　　　┣┓
 * 　　　　┃　　　　　　　┏┛
 * 　　　　┗┓┓┏━┳┓┏┛
 * 　　　　　┃┫┫　┃┫┫
 * 　　　　　┗┻┛　┗┻┛
 * ━━━━━━神兽出没━━━━━━by:web_hwf@sina.com
 *-->
<head>
    <meta charset="UTF-8">
    <title>富文本编译器案例</title>

    <!--响应式约束-->
    <meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1 user-scalable=no"/>
    <!--使用IE兼容模式渲染-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1"/>
    <meta name="renderer" content="webkit">


    <!-- 引入jQuery -->
    <script src="eleditor/jquery.min.js"></script>
    <!-- 引入百度上传插件 -->
    <script src="eleditor/webuploader.min.js"></script>
    <!-- 插件核心 -->
    <script src="eleditor/Eleditor.js"></script>


    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #contentEditor{
            width: 100%;
            min-height: 300px;
            box-sizing: border-box;
            padding: 10px;
            color: #444;
        }
        #contentEditor p{
            letter-spacing: 0.25px;
            font: 16px/25px Tahoma, Verdana, 宋体;
            margin: 20px 0px;
        }
        #contentEditor h4 {
            font-weight: bold;
            line-height: 1.333em;
            margin: 10px 0 20px;
            padding: 25px 0 0;
        }
        #contentEditor img{
            width: 100%;
            height: auto;
            box-sizing: border-box;
        }
        .dempTip{
            border-left: 2px solid #00BCD4;
            padding-left: 5px;
            margin: 10px;
            font-size: 16px;
        }
        code{
            white-space: pre-wrap;
            background: #2D2D2D;
            display: block;
            margin: 10px;
            border-radius: 5px;
            color: #fff;
        }
        .viewTit{
            color: #FF5722;
            position: fixed;
            top: 0;
            left: 0;
            height: 30px;
            line-height: 30px;
            font-size: 14px;
            text-align: center;
            display: block;
            width: 100%;
            background: #FFEB3B;
            box-shadow: 0 0 5px;
        }
    </style>
</head>
<body>
<!--
    编译器外层 位置定位  编辑器源码 已修改 切勿下载源码覆盖
    class="eEditor_border"  为必加属性  style必须有position: relative;overflow: auto;   高度和宽度可以自己调整
    id="contentEditor" 未出世化插件ID
-->

<div style="position: fixed;top: 150px;right: 150px;bottom: 150px">

    <div class="eEditor_border" style="position: relative;height:700px;width: 380px;overflow: auto;box-shadow: 0 0 5px rgba(41, 35, 35, 0.6);">

        <div id="contentEditor">

            <h1 style="text-align: center;">点击开始编辑文章</h1>

            <p>随着网站的不断发展，网站本身的架构会不断变化，页面和内容会在重设计过程中不断调整，被重新定向。网站本身的优化，往往不可避免地让一部分内容不再那么容易被用户找到，当用户打开的时候，就是<span class="wp_keywordlink_affiliate"><a href="http://www.uisdc.com/tag/404%e9%a1%b5%e9%9d%a2" title="View all posts in 404页面" target="_blank">404页面</a></span>了。</p>
            <p>绝大多数用户害怕看到这个页面，这意味着这个链接所对应的页面已经不复存在，或者搜索结果出错了。但是，如果你能够正确设计<span class="wp_keywordlink_affiliate"><a href="http://www.uisdc.com/tag/404%e9%a1%b5%e9%9d%a2" title="View all posts in 404页面" target="_blank">404页面</a></span>，反而能够充分利用它解决用户的问题，给你的网站带来更多的访客和流量。下面是精心总结的5个技巧，并不复杂，用好了当有奇效。</p>
            <h4>1、创建一个网站最佳内容清单</h4>
            <img src="http://image.uisdc.com/wp-content/uploads/2017/05/airbnb-1.jpg" alt="" width="1856" height="1280" class="alignnone size-full wp-image-232092" srcset="http://image.uisdc.com/wp-content/uploads/2017/05/airbnb-1.jpg 1856w, http://image.uisdc.com/wp-content/uploads/2017/05/airbnb-1-768x530.jpg 768w, http://image.uisdc.com/wp-content/uploads/2017/05/airbnb-1-800x552.jpg 800w" sizes="(max-width: 1856px) 100vw, 1856px" />
            <p>用户虽然没有按照预期找到他们想要的页面和内容，但这并不意味着整个流程就走入了死胡同，如果你着力与创建优质的内容，那么应该在<span class="wp_keywordlink_affiliate"><a href="http://www.uisdc.com/tag/404%e9%a1%b5%e9%9d%a2" title="View all posts in 404页面" target="_blank">404页面</a></span>为用户推荐最佳的网站内容。</p>
            <p>相比于单独留下一个硕大无比的404，更好的选择是为用户提供点建议，帮助他们更好的探索你的网站的其他内容。用户可能会在其他的地方找到他们想要的</p>
            <h4>2、拿好处来同用户交换电子邮件</h4>
            <img src="http://image.uisdc.com/wp-content/uploads/2017/05/incentive.jpg" alt="" width="1856" height="1280" class="alignnone size-full wp-image-232091" srcset="http://image.uisdc.com/wp-content/uploads/2017/05/incentive.jpg 1856w, http://image.uisdc.com/wp-content/uploads/2017/05/incentive-768x530.jpg 768w, http://image.uisdc.com/wp-content/uploads/2017/05/incentive-800x552.jpg 800w" sizes="(max-width: 1856px) 100vw, 1856px" />
            <p>尽管访客面对这404页面，依然没有找到他们想要的内容，但这并不意味着无法将他们转化为未来的用户。获取用户的邮件，定期推送信息是将访客最终转化为网站用户的重要手段，而想要让订阅网站的信息推送，还得拿出一些好处出来：免费的课程，电子图书，免费可用的素材，实用的工具等等等等。</p>
            <p>对于许多功能性的网站而言，增加网站的流量，或者说增加客户是主要的目标。如果网站的拥有者是牙医、律师或者说某个整形机构，那么每增加一名客户，都意味着数千美元的进账。所以，抓住每一个访客并且将他们转化为客户，是非常有意义的。</p>
            <h4>3、加个搜索框</h4>
            <img src="http://image.uisdc.com/wp-content/uploads/2017/05/twitter-search.jpg" alt="" width="1856" height="1280" class="alignnone size-full wp-image-232090" srcset="http://image.uisdc.com/wp-content/uploads/2017/05/twitter-search.jpg 1856w, http://image.uisdc.com/wp-content/uploads/2017/05/twitter-search-768x530.jpg 768w, http://image.uisdc.com/wp-content/uploads/2017/05/twitter-search-800x552.jpg 800w" sizes="(max-width: 1856px) 100vw, 1856px" />
            <p>许多较老、经过重设计的网站，许多老页面都会在调整中被重新定位到另一个位置。所以，在你的404页面中添加一个能全局搜索的搜索框是非常合乎情理，也能够帮助访客解决问题的方案。即使原始链接已经不存在了，也可以根据内容、主题来搜索到相关的内容， 甚至是被重新定位的页面。搜索框不仅能够提供给用户获取内容的新途径，而且能够进一步提升网站流量。</p>
            <p>Twitter 在这件事情上就做的很棒，通过指导用户搜索目标主题来告别404的尴尬。</p>
            <h4>4、添加联系方式</h4>
            <img src="http://image.uisdc.com/wp-content/uploads/2017/05/magnt.jpg" alt="" width="1856" height="1280" class="alignnone size-full wp-image-232089" srcset="http://image.uisdc.com/wp-content/uploads/2017/05/magnt.jpg 1856w, http://image.uisdc.com/wp-content/uploads/2017/05/magnt-768x530.jpg 768w, http://image.uisdc.com/wp-content/uploads/2017/05/magnt-800x552.jpg 800w" sizes="(max-width: 1856px) 100vw, 1856px" />
            <p>许多优秀的404页面会包含设计师或者相关运营、维护团队的联系方式。这些表单、联系方式主要可以起到两个作用。其一，帮助网站的访客，或者说潜在客户可以直接联系到网站的拥有者、设计者或者运营者。即使他们没有找到想要的内容，通过页面的联系方式可以直接联系相关人员，继续获取想要的信息。</p>
            <p>它的另外一项重要的功能在于，表单和联系方式能够让访客提交错误信息，从而让设计和内容团队有针对性地调整、修改、提升网站的内容。</p>
            <h4>5、控制好你的幽默感</h4>
            <img src="http://image.uisdc.com/wp-content/uploads/2017/05/homestarrunner.jpg" alt="" width="1856" height="1280" class="alignnone size-full wp-image-232088" srcset="http://image.uisdc.com/wp-content/uploads/2017/05/homestarrunner.jpg 1856w, http://image.uisdc.com/wp-content/uploads/2017/05/homestarrunner-768x530.jpg 768w, http://image.uisdc.com/wp-content/uploads/2017/05/homestarrunner-800x552.jpg 800w" sizes="(max-width: 1856px) 100vw, 1856px" />
            <p>虽然有不少相关的404页面设计的文章推荐使用幽默的手法来环节尴尬的氛围，但是我对此一直持保留意见。一方面，大家的幽默感并不一定能够“一致”，同样的笑话对不同的访客可能效果差别很大。另一方面，当用户在搜索一项重要的信息的时候，跳出来的是一个404，这本身就是一个笑话。</p>
            <p>绝大多数用户在网站中碰到一个不可用的页面，并不会觉得这很好笑。实际状况中，用户仅仅只是要找到他们想要的东西，继续探索，或者转头离开。想让用户会心一笑想法并不为过，但是提供更加切实可行的解决方案，来的更加实在。</p>
            <h4>结语</h4>
            <p>实际上，今天所推荐的5个技巧，都是建立在一个目的之上：让用户不会在你的网站中陷入死胡同。当用户陷入困境的时候，你能够在页面中提供额外的选项，就是为他们打开了一扇拥有可能性的门。最重要的是，不要把所有的东西都堆砌在404页面上，有策略地提供解决方案，才是正确的思路。</p>
            <img src="http://image.uisdc.com/wp-content/uploads/2017/05/hilary.jpg" alt="" width="1856" height="1280" class="alignnone size-full wp-image-232087" srcset="http://image.uisdc.com/wp-content/uploads/2017/05/hilary.jpg 1856w, http://image.uisdc.com/wp-content/uploads/2017/05/hilary-768x530.jpg 768w, http://image.uisdc.com/wp-content/uploads/2017/05/hilary-800x552.jpg 800w" sizes="(max-width: 1856px) 100vw, 1856px" />
            <p>如果你是网站的设计者或者管理者，你应该同遭遇404页面的访客多沟通，一方面能够真正帮他们找到想要的东西，提供可用的服务，让你的网站和服务能够走的更远。而另外一方面，即时跟进出错的状况，能够帮你调整网站，提供正确的服务和信息。</p>
            <p>404页面不是世界的尽头，它们更应该是一个十字路口，提供不同的路径，将用户引领到的对的地方。</p>

        </div>


    </div>


</div>

<script>
    var contentEditor = new Eleditor({
        el: '#contentEditor',
        upload:{
            server: '/',
            // headers: {
            // 	'token': '123123'
            // },
            compress: false,
            fileSizeLimit: 2
        },
        /*初始化完成钩子*/
        mounted: function(){

            /*以下是扩展插入视频的演示*/
            var _videoUploader = WebUploader.create({
                auto: true,
                server: '服务器地址',
                /*按钮类就是[Eleditor-你的自定义按钮id]*/
                pick: $('.Eleditor-insertVideo'),
                duplicate: true,
                resize: false,
                accept: {
                    title: 'Images',
                    extensions: 'mp4',
                    mimeTypes: 'video/mp4'
                },
                fileVal: 'video',
            });
            _videoUploader.on( 'uploadSuccess', function( _file, _call ) {

                if( _call.status == 0 ){
                    return window.alert(_call.msg);
                }

                /*保存状态，以便撤销*/
                contentEditor.saveState();
                contentEditor.getEditNode().after(`
									<div class='Eleditor-video-area'>
										<video src="${_call.url}" controls="controls"></video>
									</div>
								`);
                contentEditor.hideEditorControllerLayer();
            });
        },
        changer: function(){
            console.log('文档修改');
        },
        /*自定义按钮的例子*/
        toolbars: [
            'insertText',
            'editText',
            'insertImage',
            'insertLink',
            'insertHr',
            'delete',
            //自定义一个视频按钮
            {
                id: 'insertVideo',
                // tag: 'p,img', //指定P标签操作，可不填
                name: '插入视频',
                handle: function(select, controll){//回调返回选择的dom对象和控制按钮对象

                    /*因为上传要提前绑定按钮到webuploader，所以这里不做上传逻辑，写在mounted*/

                    /*!!!!!!返回false编辑面板不会关掉*/
                    return false;
                }
            },
            'undo',
            'cancel'
        ]
        //placeHolder: 'placeHolder设置占位符'
    });
</script>

</body>
</html>